<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的收货地址</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/vip-address.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/validform.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/jquery-ui.min.css"/>
		<script src="__PUBLIC__/midi/js/province.js"></script>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js"></script>
		<script src="__PUBLIC__/midi/js/public.js"></script>
		<script src="__PUBLIC__/midi/js/swiper-3.4.2.jquery.min.js"></script>
		<script src="__PUBLIC__/midi/js/validform.js"></script>
		<script src="__PUBLIC__/midi/js/jquery-ui.min.js"></script>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<div class="shipin-datails">
			<div class="con">
				<div class="inner">
					<i></i>
				    <span>当前位置： 会员中心&gt; 收货地址</span>
				</div>
			</div>
		</div>
		<div class="wiezhi">
			   <div class="con">
				  <span>当前位置： 会员中心 &gt; 收货地址</span>
			   </div>
		    </div>
	    <!--会员页的主要内容-->
	    <div class="wrapper">
	    	<aside>
	    	    <div class="con">
	    	    	<div class="title">
	    	    		<h2>个人中心</h2><input type="radio" /><span></span>
	    	    	</div>
	    	        <ul class="first">
	    	    	   <li><a href="{:U('Home/Index/userinfo')}">个人信息</a></li>
	    	    	   <li><a href="{:U('Home/Index/vip_pwd')}">密码修改</a></li>
	    	        </ul>
	    	        <div class="title">
	    	        	<h2>系统信息</h2><input type="radio" /><span></span>
	    	        </div>
	    	        <ul class="first">
	    	    	  <li><a href="{:U('Home/Order/orderList')}">我的订单</a></li>
	    	    	  <li class="active"><a href="{:U('Home/Index/vip_address')}">收货地址</a></li>
	    	       </ul>
	    	    </div>
	    	</aside>
	    	<div class="content">
	    		<div class="hd">
	    			<h2>
	    				收货地址
	    			</h2>
	    			<span class="add"><button>添加新地址</button></span>
	    		</div>
	    	    <table>
					<foreach name="address_list" item="vo">
						<tr>
							<td>
								<label>
	    	    				<span class="cssradio">
									<input type="radio" name="gander" <if condition="$vo['address_default'] eq 1">checked="checked"</if> />
	    	    			       <span></span>
	    	    		       </span>
								</label>
							</td>
							<td>{$vo['address_username']}</td>
							<td width="15%"><p>{$vo['address_userphone']}</p></td>
							<td width="40%">{$vo['address_address']}</td>
							<td width="10%">{$vo['address_zipcode']}</td>
							<td width="25%">
								<if condition="$vo['address_default'] eq 1">
									<a>【默认】</a>
								</if>
								<a class="del-rev" data-id="{$vo['address_id']}" def="{$vo['address_default']}">【修改】</a>
								<a class="del-add" data-id="{$vo['address_id']}">【删除】</a>
							</td>
						</tr>
					</foreach>
	    	    </table>
	    	</div>
	    </div>
	    <!--会员页的主要内容结束-->
	    <!--添加新地址的弹窗-->
	    <div class="add-overlay">
			<div class="overlay-content">
			  <div class="title">
				<span class="add">添加收货地址</span>
				<span class="close">关闭</span>
			  </div>
			 <div class="overlay-main">
				<form class="registerform" method="post">
					<input type="hidden" name="id" value="0">
					<input type="hidden" name="address_default" value="0">
					<div>
						<label>收货人姓名</label>
					    <input type="input" name="address_username" placeholder="收货人姓名" datatype="*" nullmsg="请输入收货人姓名"/>
					</div>
					<div>
						<label>收货人地址</label>
						<span>
							<select  nullmsg="请选择省份" name="province3"></select>
						    <select  nullmsg="请选择城市" name="city3"></select>
						    <select  nullmsg="请选择市区" name="area3"></select>
						</span>
					</div>
					<div>
						<label></label>
					    <input type="input" name="address_detail" placeholder="街道地址及门牌号" datatype="*" nullmsg="请输入具体地址"/>
					</div>
					<div>
						<label>邮政编码</label>
					    <input type="input" name="address_zipcode" placeholder="邮政编码" datatype="p" errormsg="请输入正确的邮政编码"/>
					</div>
					<div>
						<label>联系电话</label>
					    <input type="input" name="address_userphone" placeholder="手机号" datatype="m" errormsg="请输入正确的手机号码"/>
					</div>
					<div>
						<label></label>
						<input type="submit" placeholder="提交" class="submit"/>
						<input type="reset" value="取消" class="cancel"/>
					</div>
				</form>
			</div>
		    </div>
		</div>
		<!--删除收货地址的弹窗-->
		<div class="del-overlay">
			<div class="del-content">
				<div class="title">
				    <span>删除收货地址</span>
			    </div>
			    <p>确定要删除这条地址吗?</p>
			    <button class="del-sure">确定</button>
			    <button class="del-cancel">取消</button>
			</div>
		</div>
		
	    <script>
            new PCAS("province3","city3","area3");
	    	$(function(){
//	    		添加新地址弹窗
	    		$(".add").on("click",function(){
	    		    $('.add-overlay .add').text('添加收货地址');
					$(".add-overlay").show();
					$("body").css({
						'overflow':'hidden'
					});
					$(".add-overlay").css({
						'overflow-x':'hidden',
						'overflow-y':'auto'
					})
				})
				$(".close").on("click",function(){
					$(".add-overlay").hide();
					$("body").css({
						'overflow':'auto'
					})
				});
				$.Tipmsg.tit="错误提示";
	            var demo=$(".registerform").Validform({
		           beforeSubmit:function(curform){
			          $(":submit",this).attr("disabled","disabled");  
		           },
	            });
	           demo.tipmsg.s="请输入信息";
//	                                   删除地址弹窗
	           $(".del-add").on("click",function(){
                   var id = $(this).attr('data-id');
	           	  var item = $(this).parents("tr");
	           	  $(".del-overlay").show();
	           	  $(".del-sure").on("click",function(){
                      $.ajax({
                          url : "{:U('Index/del_address')}",
                          data: {id:id},
                          dataType:'json',
                          success: function(data){

                          }
                      });
	           	  	$(".del-overlay").hide();
	           	  	item.remove();
	           	  });
	           	  $(".del-cancel").on("click",function(){
	           	  	$(".del-overlay").hide();
	           	  })
	           });
				//修改地址弹窗
	            $(".del-rev").on("click",function(){
                    $('.add-overlay .add').text('修改收货地址');
					var id = $(this).attr('data-id');
                    $('.registerform input[name="id"]').val(id);
                    if($(this).parents('tr').find('input[name="gander"]').prop('checked')){
                        $('.registerform input[name="address_default"]').val(1);
					}else{
                        $('.registerform input[name="address_default"]').val(0);
					}
					var address_username = $(this).parents('tr').find('td').eq(1).text();
					var address_userphone = $(this).parents('tr').find('td').eq(2).text();
					var address_detail = $(this).parents('tr').find('td').eq(3).text();
					var address_zipcode = $(this).parents('tr').find('td').eq(4).text();
					$('input[name="address_username"]').val(address_username);
					$('input[name="address_userphone"]').val(address_userphone);
					$('input[name="address_detail"]').val(address_detail);
					$('input[name="address_zipcode"]').val(address_zipcode);

					$(".add-overlay").show();
					$("body").css({
						'overflow':'hidden'
					});
					$(".add-overlay").css({
						'overflow-x':'hidden',
						'overflow-y':'auto'
					})
				})
				$(".close").on("click",function(){
					$(".add-overlay").hide();
					$("body").css({
						'overflow':'auto'
					})
				});
	    	})
	    </script>
	</body>
</html>

